$(document).ready(function () {
    // 模拟触发选择框的 change 事件，来加载默认选中的年份的台风数据
    var defaultYear = $('#year-select').val(); // 获取当前选择框的默认值
    loadTyphoonList(defaultYear); // 加载默认年份的台风数据

    // 当年份选择变化时加载新的台风列表
    $('#year-select').change(function () {
        var selectedYear = $(this).val(); // 获取选中的年份
        loadTyphoonList(selectedYear); // 加载选中年份的台风数据
    });

    // 在文件顶部添加一个全局变量来存储加载动画元素
    var loadingOverlay = $('<div class="loading-overlay"><div class="spinner-border text-primary" role="status"><span class="visually-hidden">Loading...</span></div></div>');

    // 用于加载台风列表的函数
    function loadTyphoonList(year) {
        // 显示加载动画
        $('body').append(loadingOverlay);
        
        $.ajax({
            url: '/selected_get_typhoon/', // 获取表单的 action URL
            type: 'GET', // 使用 GET 请求
            data: {year: year}, // 传递选中的年份
            success: function (response) {
                // 隐藏加载动画
                loadingOverlay.remove();
                
                var typhoonList = $('#typhoon-list');
                if (response.status) {
                    // 清空地图上所有的路径标记
                    if (window.typhoonMarkers) {
                        for (var typhoonId in window.typhoonMarkers) {
                            if (window.typhoonMarkers[typhoonId].markers) {
                                window.typhoonMarkers[typhoonId].markers.forEach(function (marker) {
                                    marker.remove(); // 移除标记点
                                });
                            }
                            if (window.typhoonMarkers[typhoonId].polyline) {
                                window.typhoonMarkers[typhoonId].polyline.remove(); // 移除路径线
                            }
                        }
                        window.typhoonMarkers = {}; // 清空路径数据
                    }

                    var typhoonData = response.data;
                    typhoonList.empty(); // 清空之前的列表项

                    // 存储当前选中的复选框状态
                    var selectedTyphoons = $('.form-check-input:checked').map(function () {
                        return $(this).val();
                    }).get();

                    typhoonData.forEach(function (typhoon) {
                        // 动态生成带有复选框的列表项
                        var isChecked = selectedTyphoons.includes(typhoon.Typhoon_Id.toString()) ? 'checked' : '';
                        var listItem = '<li class="list-group-item">' +
                            '<input class="form-check-input me-1" type="checkbox" value="' + typhoon.Typhoon_Id + '" ' +
                            'data-typhoon-name="' + typhoon.Typhoon_CName + '" data-typhoon-id="' + typhoon.Typhoon_Id + '" ' + isChecked + '/>' +
                            typhoon.Typhoon_CName + ' - ' + typhoon.Typhoon_EName +
                            '</li>';
                        typhoonList.append(listItem); // 添加到列表中
                    });

                    // 重新绑定复选框的 change 事件
                    $('.form-check-input').off('change').on('change', function () {
                        // 显示加载动画
                        $('body').append(loadingOverlay);
                        
                        var typhoonName = $(this).data('typhoon-name'); // 获取被选中的台风名称
                        var typhoonId = $(this).data('typhoon-id'); // 获取台风ID
                        var isChecked = $(this).prop('checked'); // 获取复选框的状态

                        console.log(typhoonName + " 被 " + (isChecked ? "选中" : "取消选中"));

                        var csrfToken = $('meta[name="csrf-token"]').attr('content');
                        var customIcon = L.icon({
                            iconUrl: '/static/image/TS.png', // 这里是你自定义图片的路径
                            iconSize: [10, 10], // 图标的大小
                            iconAnchor: [5, 10], // 图标的锚点位置，即图标的"底部"位置
                            popupAnchor: [0, -10], // 弹出框的相对位置
                            tooltipAnchor: [5, -10] // 提示框的相对位置
                        });
                        var taifengIcon = L.icon({
                            iconUrl: '/static/image/台风.png', // 这里是你自定义图片的路径
                            iconSize: [20, 20], // 图标的大小
                            iconAnchor: [10, 20], // 图标的锚点位置，即图标的"底部"位置
                            popupAnchor: [0, -20], // 弹出框的相对位置
                            tooltipAnchor: [10, -20] // 提示框的相对位置
                        });

                        // 发起 Ajax 请求获取台风路径数据
                        $.ajax({
                            url: '/list_get_path/', // 替换为实际的请求 URL
                            type: 'POST',
                            headers: {
                                'X-CSRFToken': csrfToken // 包含CSRF token
                            },
                            data: {typhoon_id: typhoonId}, // 传递台风ID来获取路径
                            success: function (response) {
                                // 隐藏加载动画
                                loadingOverlay.remove();
                                console.log('台风路径数据:', response);
                                if (response.status) {
                                    var pathData = response.data; // 假设返回的数据包含台风路径的经纬度

                                    // 将路径点转换为经纬度数组
                                    var latLngs = pathData.map(function (point) {
                                        return [point.lat, point.lng]; // 将路径点转换为经纬度数组
                                    });

                                    // 如果地图和路径图层存在，先移除之前的路径标点
                                    if (!window.typhoonMarkers) {
                                        window.typhoonMarkers = {};
                                    }

                                    // 如果复选框被选中，显示路径
                                    if (isChecked) {
                                        if (window.typhoonMarkers[typhoonId]) {
                                            console.log('路径已存在，跳过添加');
                                            return;
                                        }

                                        window.typhoonMarkers[typhoonId] = {
                                            markers: [],
                                            polyline: null,
                                            currentIndex: 0 // 添加当前加载点的索引
                                        };

                                        function getColor(level) {
                                            if (level <= 7) {
                                                return 'yellow';
                                            } else if (level > 7 && level < 11) {
                                                return 'blue';
                                            } else if (level > 9 && level < 12) {
                                                return 'green';
                                            } else if (level > 11 && level < 14) {
                                                return 'orange';
                                            } else if (level > 13 && level < 16) {
                                                return 'pink';
                                            } else if (level > 15) {
                                                return 'red';
                                            } else {
                                                return 'yellow';  // 默认色
                                            }
                                        }

                                        // 添加逐点加载函数
                                        function addPointSequentially() {
                                            if (window.typhoonMarkers[typhoonId].currentIndex >= latLngs.length) {
                                                return;
                                            }

                                            var index = window.typhoonMarkers[typhoonId].currentIndex;
                                            var latLng = latLngs[index];
                                            var pointData = pathData[index];
                                            var level = pointData.level;
                                            var markerColor = getColor(level);

                                            // 如果是第一个点，初始化polyline并设置初始地图中心
                                            if (index === 0) {
                                                window.typhoonMarkers[typhoonId].polyline = L.polyline([latLng], {
                                                    color: markerColor,
                                                    weight: 2,
                                                    opacity: 0.7
                                                }).addTo(map);
                                                
                                                // 设置初始地图中心为第一个点
                                                map.setView(latLng, map.getZoom());
                                            } else {
                                                window.typhoonMarkers[typhoonId].polyline.addLatLng(latLng);
                                            }

                                            // 添加标记点
                                            var marker;
                                            var isLastPoint = index === latLngs.length - 1;
                                            if (isLastPoint) {
                                                marker = L.marker(latLng, {icon: taifengIcon}).addTo(map);
                                            } else {
                                                marker = L.marker(latLng, {icon: customIcon}).addTo(map);
                                            }

                                            // 添加点击事件
                                            var popup = L.popup();
                                            marker.on('click', function () {
                                                var popupContent = '<b>路径点数据:</b><br>' +
                                                    '经度/纬度: [' + pointData.lng + ',' + pointData.lat + ']<br>' +
                                                    '当前时间: ' + pointData.time + '<br>' +
                                                    '风速: ' + pointData.speed + ' 米/秒 <br>' +
                                                    '等级: ' + pointData.level + '<br>' +
                                                    '强度: ' + pointData.intensity + '<br>' +
                                                    '压力: ' + pointData.pressure + ' pa';
                                                popup.setLatLng(latLng)
                                                    .setContent(popupContent)
                                                    .openOn(map);
                                            });

                                            window.typhoonMarkers[typhoonId].markers.push(marker);
                                            window.typhoonMarkers[typhoonId].currentIndex++;

                                            // 设置下一个点的加载延迟
                                            setTimeout(addPointSequentially, 200);
                                        }

                                        // 开始逐点加载
                                        addPointSequentially();
                                    } else {
                                        // 如果复选框被取消选中，隐藏该路径
                                        if (window.typhoonMarkers[typhoonId]) {
                                            window.typhoonMarkers[typhoonId].markers.forEach(function (marker) {
                                                marker.remove(); // 移除标记点
                                            });
                                            window.typhoonMarkers[typhoonId].polyline.remove(); // 移除路径线
                                            delete window.typhoonMarkers[typhoonId]; // 删除路径数据
                                        }
                                    }
                                } else {
                                    console.error('获取台风路径失败:', response.error);
                                }
                            },
                            error: function (xhr, status, error) {
                                // 隐藏加载动画
                                loadingOverlay.remove();
                                console.error('新的请求失败:', error);
                            }
                        });
                    });
                } else {
                    // 如果没有数据，显示错误信息
                    alert("数据不存在！");
                    typhoonList.empty();
                    var listItem = '<li class="list-group-item">' + response.error + '</li>';
                    typhoonList.append(listItem);
                }
            },
            error: function (xhr, status, error) {
                // 隐藏加载动画
                loadingOverlay.remove();
                console.error('请求失败:', error);
            }
        });
    }
});

